<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url(./bucket.css);
        #cesiumContainer{
            position:absolute;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="../Build/Cesium/Cesium.js"></script>
<script>
    let viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker:true,
        animation: true,
        timeline: true
    });
    viewer.scene.globe.baseColor = new Cesium.Color(8 / 255.0, 24 / 255.0, 52 / 255.0, 1.0);

    let numberOfArcs = 50;
    let startLon = 116.314295;
    let startLat = 39.904194;

    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

    let startTime = viewer.clock.startTime;
    let midTime = Cesium.JulianDate.addSeconds(startTime, 43200, new Cesium.JulianDate());
    let stopTime = Cesium.JulianDate.addSeconds(startTime, 86400, new Cesium.JulianDate());

    for (let i = 0; i < numberOfArcs; ++i) {
        let color = Cesium.Color.fromRandom({
            alpha : 1.0
        });
        let stopLon = Cesium.Math.nextRandomNumber() * 358 - 179;
        let stopLat = Cesium.Math.nextRandomNumber() * 178 - 89;

        let property = new Cesium.SampledPositionProperty();
        let startPosition = Cesium.Cartesian3.fromDegrees(startLon, startLat, 0);
        property.addSample(startTime, startPosition);
        let stopPosition = Cesium.Cartesian3.fromDegrees(stopLon, stopLat, 0);
        property.addSample(stopTime, stopPosition);

        let midPoint = Cesium.Cartographic.fromCartesian(property.getValue(midTime));
        midPoint.height = Cesium.Math.nextRandomNumber() * 500000 + 800000;
        let midPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(
            midPoint, new Cesium.Cartesian3());

        property = new Cesium.SampledPositionProperty();
        property.addSample(startTime, startPosition);
        property.addSample(midTime, midPosition);
        property.addSample(stopTime, stopPosition);

        let arcEntity = viewer.entities.add({
            position : property,
            point : {
                pixelSize : 8,
                color : Cesium.Color.TRANSPARENT,
                outlineColor : color,
                outlineWidth : 3
            },
            path : {
                resolution : 1200,
                material : new Cesium.PolylineGlowMaterialProperty({
                    glowPower : 0.16,
                    color : color
                }),
                width : 5,
                leadTime: 1e10,
                trailTime: 1e10
            }
        });

        arcEntity.position.setInterpolationOptions({
            interpolationDegree : 5,
            interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
        });
    }
</script>
</body>
</html>